<template>
    <div>
        <div class="detail-container">
            <!-- <el-image class="logo-img" style="width: 100px; height: 100px" :src="url" :fit="fits"></el-image> -->
            <!-- <img class="logo-img" src="" alt=""> -->
            <div class="logo-img">
                <el-image :src="deb_detail.logo" alt />
            </div>
            <h1 class="title-row">{{deb_detail.deb_name}}</h1>
            <label class="label-display">版本：</label>
            <label class="content-display">{{deb_detail.version}}</label>
            <label class="label-display">包名：</label>
            <label class="content-display">{{deb_detail.package_name}}</label>
            <label class="label-display">大小：</label>
            <label class="content-display">{{deb_detail.size}}</label>
            <label class="label-display">分类：</label>
            <label class="content-display">{{categoryDisplay}}</label>
            <label class="label-display">上传日期：</label>
            <label class="content-display">{{deb_detail.update_date}}</label>
            <label class="label-display">作者：</label>
            <label class="content-display">{{deb_detail.author}}</label>
            <label class="label-display">官网：</label>
            <label class="content-display">{{deb_detail.website}}</label>
            <div class="download-button">
                <el-button @click="download">下载</el-button>
            </div>
            <label class="label-display">上传者：</label>
            <label class="content-display">{{deb_detail.uploader}}</label>
            <label class="label-display">简介：</label>
            <label class="content-display">{{deb_detail.description}}</label>
        </div>
        <el-row>
            <el-col class="screenshots_container">
                <img
                    v-for="image in screenshots"
                    :key="image"
                    class="screenshots-img"
                    :src="image"
                    alt
                />
            </el-col>
        </el-row>
        <form id="debDownloadForm" style="display:none;"></form>
    </div>
</template>

<script>
import {
    getDebDetail,
    downloadDeb,
    SCREENSHOTS_SOURCE,
} from "../util/myRequests";

export default {
    name: "detail",
    components: {},
    data() {
        return {
            deb_id: 0,
            deb_detail: {},
        };
    },
    computed: {
        categorys() {
            return this.$store.state.categoryList;
        },
        categoryDisplay() {
            if (this.categorys == undefined || this.categorys.length == 0)
                return "";
            return this.categorys.find(
                (el) => el.id == this.deb_detail.category_id
            ).display;
        },
        screenshots() {
            if (this.deb_detail.screen_shots.trim() == "") return "";

            // 本字段存储的是截图文件名，由于双引号转义问题，不得不出此下策，如有更好方法欢迎修改
            var msg = JSON.parse(
                JSON.stringify({ list: this.deb_detail.screen_shots })
            );
            var list = JSON.parse(msg["list"]);
            var res = [];
            list.forEach((element) => {
                res.push(`${SCREENSHOTS_SOURCE}/${element}`);
            });
            console.log(res);
            return res;
        },
    },
    mounted() {
        this.deb_id = this.$route.params.id;

        var deb = this.$store.getters.getAllDebCache.find(
            (el) => el.deb_id == this.deb_id
        );

        if (deb != undefined) {
            this.deb_detail = deb;
        } else {
            getDebDetail(this.deb_id)
                .then((res) => {
                    console.log(res);
                    this.deb_detail = res;
                })
                .catch((error) => console.log(error));
        }
    },
    methods: {
        download() {
            var form = document.getElementById("debDownloadForm");
            downloadDeb(this.deb_detail.deb_id, form);
        },
    },
};
</script>

<style>
.detail-container {
    display: grid;
    grid-template-columns: 2fr minmax(60px, 100px) 2fr;
    grid-template-rows: 2fr repeat(8, 1fr) minmax(10px, 3fr);
    /* grid-row-gap: 12px; */
}

.logo-img {
    grid-row-start: span 8;
    justify-self: center;
    align-self: center;
    width: 50%;
    display: inline-flex;
    justify-content: center;
}

.logo-img img {
    width: 100%;
    background-color: transparent;
}

.title-row {
    grid-column-start: span 2;
}

.label-display {
    color: gray;
}

.download-button {
    grid-row-start: span 2;
    display: inline-flex;
    justify-content: center;
}

.download-button .el-button {
    width: 60%;
    height: 40px;
}

.content-display {
    word-wrap: break-word;
}

.screenshots_container {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}

.screenshots-img {
    width: 300px;
    margin: 8px;
}
</style>